認識rem單位


rem是一個尺寸單位Bs慣用

什麼是em單位?

  • 2em
  • 2rem

em和rem的差異到底在哪?

  • 我們繼續在.em2的html再放入一個子元素strong元素並繼續加入上述.em2的class設定
  • 我們繼續在.rem2的html再放入一個子元素strong元素並繼續加入上述.rem2的class設定
  • 打開devtool先看開發工具的em處
    • em的文字大小規則是採用繼承的形式
    • 它會先看外層的尺寸是多少,為內層的文字大小重新去計算
  • 打開devtool看開發工具的rem處
  • 因為rem只有一個依據,就是最外層html的預設值16px為基準 不會受到任何父元素或外元素的設定影響 除非今天你把html的預設文字大小覆蓋掉,那rem就是依據html的文字大小小為基準
  • 調整最外層的文字大小有兩個方式
    • :root {font-size: 20px;}
    • html{font-size: 20px;}
  • rem和em需要小心的是要改就勁量改最外層的html文字大小 而不是body喔!

rem相對em來說穩定許多也好控制,,因為em會受到{外層元素的文字設定影響}尤其當有子元素變多的時候,有不同文字設定時;而rem只要設定『根元素或html標籤』的文字大小就好

  • bs5也是採用rem的單位
  • y是垂直軸 -> pt 和pb的設定 -> 1個rem單位
    .py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    }
    
#EM #rem #bs5 rem






你可能感興趣的文章

Fake Vapes and How to Avoid Them

Fake Vapes and How to Avoid Them

Auto Generate Insert Script without SQL Manager

Auto Generate Insert Script without SQL Manager

Day 12-Scope & Number Guessing Game

Day 12-Scope & Number Guessing Game






留言討論